Angular Material এর Nested Menu একটি শক্তিশালী উপাদান, যা একটি মেনুর মধ্যে আরো একটি সাবমেনু (sub-menu) তৈরি করার সুযোগ দেয়। এটি সাধারণত একাধিক স্তরের মেনু এবং সাবমেনু প্রদর্শন করতে ব্যবহৃত হয়, যেমন একটি প্রধান মেনু এবং তার অধীনে আরো অপশনগুলোর মেনু। এটি অনেক অ্যাপ্লিকেশনে ব্যবহৃত হয়, বিশেষ করে যেখানে অনেক অপশন এবং সাব-অপশন থাকে।

এখানে Angular Material এর মাধ্যমে একটি Nested Menu তৈরি করার প্রক্রিয়া দেওয়া হলো।

প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatMenuModule এবং MatButtonModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এগুলো হল মেনু তৈরি করার জন্য প্রয়োজনীয় কম্পোনেন্ট।

import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatMenuModule,
    MatButtonModule,
    MatIconModule
  ]
})
export class AppModule { }

HTML টেমপ্লেট: নেস্টেড মেনু তৈরি করা

এখন আমরা mat-menu কম্পোনেন্ট ব্যবহার করে একটি Nested Menu তৈরি করবো। নীচের কোডে, একটি প্রধান মেনু তৈরি করা হয়েছে, এবং এর মধ্যে কিছু সাবমেনু রয়েছে:

<button mat-button [matMenuTriggerFor]="menu">Main Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">Option 1</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

<mat-menu #subMenu1="matMenu">
  <button mat-menu-item>Sub Option 1.1</button>
  <button mat-menu-item>Sub Option 1.2</button>
  <button mat-menu-item>Sub Option 1.3</button>
</mat-menu>

<mat-menu #subMenu2="matMenu">
  <button mat-menu-item>Sub Option 2.1</button>
  <button mat-menu-item>Sub Option 2.2</button>
</mat-menu>

এখানে:

• mat-menu: মূল মেনু এবং সাবমেনুর জন্য ব্যবহার করা হচ্ছে।
• [matMenuTriggerFor]: এই ডিরেকটিভটি মেনু ট্রিগার করতে ব্যবহৃত হয়, অর্থাৎ কোন বাটনের জন্য মেনু প্রদর্শিত হবে তা নির্ধারণ করে।
• #menu, #subMenu1, #subMenu2: মেনু উপাদানগুলির জন্য রেফারেন্স তৈরি করা হচ্ছে।

নেস্টেড মেনুর জন্য CSS কাস্টমাইজেশন

Angular Material ডিফল্ট স্টাইলিং সরবরাহ করে, তবে আপনি চাইলে Nested Menu এর জন্য কাস্টম CSS স্টাইলও অ্যাড করতে পারেন। যেমন, সাবমেনুতে কিছু অতিরিক্ত স্পেস বা আলাদা রং দেয়া।

mat-menu {
  min-width: 200px;
}

mat-menu button {
  padding: 8px;
}

mat-menu .mat-menu-item {
  font-size: 14px;
}

mat-menu .mat-menu-panel {
  background-color: #f9f9f9;
}

এই CSS কোডে আমরা মেনুর মিনিমাম প্রস্থ, বাটনের প্যাডিং, ফন্ট সাইজ, এবং ব্যাকগ্রাউন্ড রং কাস্টমাইজ করেছি।

নেস্টেড মেনুতে আইকন যুক্ত করা

Angular Material এর MatIconModule ব্যবহার করে আপনি মেনুতে আইকনও যুক্ত করতে পারেন। এটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে।

<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">
    <mat-icon>home</mat-icon> Option 1
  </button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">
    <mat-icon>settings</mat-icon> Option 2
  </button>
  <button mat-menu-item>
    <mat-icon>help</mat-icon> Option 3
  </button>
</mat-menu>

এখানে আমরা mat-icon ট্যাগ ব্যবহার করেছি, যা প্রতিটি মেনু আইটেমের জন্য আইকন প্রদর্শন করে।

নেস্টেড মেনুতে কাস্টম আচরণ

আপনি Angular Material এর mat-menu কম্পোনেন্টের মাধ্যমে মেনুর আচরণও কাস্টমাইজ করতে পারেন। যেমন, মেনুর অবস্থান, অ্যানিমেশন ইফেক্ট, অথবা মেনু ওপেন এবং ক্লোজ করার সময় ইভেন্ট হ্যান্ডলিং করা।

মেনু পজিশন কাস্টমাইজ করা

<mat-menu #menu="matMenu" xPosition="before" yPosition="below">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">Option 1</button>
</mat-menu>

এখানে xPosition="before" এবং yPosition="below" দিয়ে মেনুর পজিশন নির্ধারণ করা হয়েছে।

মেনু ওপেন-কলোজ ইভেন্ট হ্যান্ডলিং

openMenu() {
  this.menu.open();
}

closeMenu() {
  this.menu.close();
}

এখানে আমরা মেনু ওপেন এবং ক্লোজ করার জন্য একটি ফাংশন তৈরি করেছি।

Angular Material Nested Menu একটি অত্যন্ত কার্যকরী কম্পোনেন্ট যা ব্যবহারকারীদের জন্য একাধিক স্তরের মেনু এবং সাবমেনু তৈরি করতে সহায়ক। এটি mat-menu এবং mat-menu-item এর মাধ্যমে খুব সহজেই ইমপ্লিমেন্ট করা যায় এবং একাধিক স্তরের মেনু তৈরি করতে [matMenuTriggerFor] ব্যবহার করা হয়। Angular Material এর সাহায্যে আপনি মেনুর স্টাইলিং, আচরণ এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে।